<template>

    <div class="app-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="12">
          <el-button
              type="primary"
              @click="handleSub"
          >提交结果</el-button>
          <el-button
              type="primary"
              @click="handleRFIDInventory"
          >RFID盘点</el-button>
        </el-col>
        <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-row :gutter="10" class="mb8">

      </el-row>
      <el-table ref="table" v-loading="tableData.loading" :data="tableData.list">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="状态" width="60" align="center" prop="state">
          <template #default="scope">
            <dict-tag :options="asset_inventory_item_state" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column width="120" label="图片" align="center" prop="number">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                placement="right-start">
              <template #content>
                <img alt="" v-if="scope.row.imgUrl" :src="showImg(scope.row.imgUrl)" width="100" height="100" />
              </template>
              <img alt="" v-if="scope.row.imgUrl" :src="showImg(scope.row.imgUrl)" width="30" height="30" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column width="120" label="资产编码" align="center" prop="number"/>
        <el-table-column width="180" label="资产名称" align="center" prop="name"/>
        <el-table-column width="120" label="资产分类" align="center" prop="categoryName"/>
        <el-table-column width="290" label="RFID" align="center" prop="rfid"/>
        <el-table-column width="120" label="品牌" align="center" prop="brand"/>
        <el-table-column width="120" label="型号" align="center" prop="model"/>
        <el-table-column width="120" label="购置方式" align="center" prop="buyWay"/>
        <el-table-column width="120" label="购置时间" align="center" prop="buyTime">
          <template #default="scope">
            <span>{{ scope.row.buyTime }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" label="购置金额" align="center" prop="buyPrice"/>
        <el-table-column width="120" label="使用人" align="center" prop="userName"/>
        <el-table-column width="120" label="管理员" align="center" prop="adminName"/>

        <el-table-column width="60" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                link
                @click="handleFinish(scope.row)"

            >完成</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="tableData.paging.total>0"
          :total="tableData.paging.total"
          v-model:page="tableData.paging.pageNum"
          v-model:limit="tableData.paging.pageSize"
          @pagination="getList"
      />

      <inventory-tip-dialog ref="tipDialog" @sub="getList"></inventory-tip-dialog>
      <send-card ref="sendCardDialog" @sub="getList"></send-card>

      <RFIDDialog ref="inventoryDialog" @sub="getList" ></RFIDDialog>
    </div>


    
  </template>
  
  <script setup>

  import { useRoute } from "vue-router";
  import api from './api.js'
  import SendCard from './sendCard.vue'
  import InventoryTipDialog from "@/views/asset/inventoryApply/detail/InventoryTipDialog.vue";
  import RFIDDialog from "@/components/Asset/RfidDialog";


  const { proxy } = getCurrentInstance();
  const { asset_inventory_item_state } = proxy.useDict("asset_inventory_item_state");

  const router = useRoute();

  const editDialog = ref();
  const sendCardDialog = ref();
  const tipDialog = ref();
  const inventoryDialog = ref();

  // 遮罩层
  const loading = ref(false);
  // 导出遮罩层
  const exportLoading = ref(false);
  const table = ref();
  const tableData = reactive({
    loading: false,
    list: [], // 表格列表数据
    paging: {
      total: 0, // 总条数
      pageNum: 1,
      pageSize: 10,
    }
  });

  const initQueryParams = {
    pageNum: 1,
    pageSize: 10,
    number: null,
    name: null,
    categoryId: null,
    rfid: null,
    brand: null,
    model: null,
    buyWay: null,
    buyTime: null,
    buyPrice: null,
    adminId: null
  }

  const queryParams = reactive({...initQueryParams})

  /** 查询资产清单表列表 */
  async function getList() {
    const detailId = router.params.detailId;
    loading.value = true;
    const {pageNum, pageSize} = tableData.paging;
    const query = {...queryParams};
    const pageReq = {page: pageNum - 1, size: pageSize};
    api.list(query, pageReq, detailId).then(response => {

      const { content, totalElements } = response
      tableData.list = content;
      tableData.paging.total = totalElements;
      tableData.loading = false;
    });
  }

  // 表单重置
  function reset() {
    Object.assign(queryParams, initQueryParams)
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    tableData.paging.pageNum = 1;
    getList();
  }

  /** 重置按钮操作 */
  function resetQuery() {
    reset();
    handleQuery();
  }

  function showImg(img) {
    return import.meta.env.VITE_APP_BASE_API + img;
  }

  // 多选框选中数据
  function handleSelectionChange(selection) {
    // this.ids = selection.map(item => item.id)
    // this.single = selection.length!==1
    // this.multiple = !selection.length
  }

  /** 提交结果按钮操作 */
  function handleSub() {
    const detailId = router.params.detailId;
    tipDialog.value.open(detailId);
  }

  /** 盘点按钮操作 */
  function handleRFIDInventory() {
    inventoryDialog.value.open();
  }

  /** 盘点按钮操作 */
  function handleStopInventory() {

    // 获取选中的行
    const rows = table.value.getSelectionRows();
    const ids = rows.map(item => {
      return item.id;
    });
    api.stopInventory().then(response => {
      getList();
    })
  }


  function handleFinish(row) {
    api.finish(row.id).then(response => {
      getList();
    })
  }


  // 页面打开后获取列表数据
  onMounted( async () => {
    await getList();
    // await getTreeData();
  });
  </script>
  